<template>
  <!-- AQI对比 -->
  <div class="curveWrapper">
    <!-- 图表 -->
    <section class="section">
      <div class="sectionTop paddingBottom16">
        <h3>共{{selectedRows.length}}个监测点<span>*CO浓度单位为mg/m³ 其他颗粒物浓度单位为μg/m³ ，温度单位为°C，湿度单位为%</span></h3>
      </div>
      <div class="sectionSearch">
        <label class="marginRight4">数据类型：</label>
        <!-- 下拉时间选择 -->
        <CompareDown :options="timeList"
                     :downType="downTypeList[0]"
                     :ajaxParam="ajaxParam"
                     @downClickPar="downClickPar" />

        <!-- 日期 年-月-日 -->
        <a-range-picker @change="onChangeDate"
                        :model="mode2"
                        :default-value="[moment(searchParam.start, dateFormat), moment(searchParam.end, dateFormat)]"
                        :disabled-date="disabledDate"
                        :getCalendarContainer="(triggerNode) => triggerNode.parentNode">
          <a-icon slot="suffixIcon"
                  type="calendar" />
        </a-range-picker>

        <a-button type="primary"
                  class="marginLeft16"
                  @click="searchBtnClick">
          查询
        </a-button>

      </div>

      <!-- 柱状图 -->
      <CompareBar ref="CompareBar"
                  :ajaxParam="ajaxParam"
                  :scrollTop="scrollTop" />
    </section>
  </div>
</template>

<script>
import moment from 'moment'
import Com from '../.././common/js/com.js'
import CompareBar from './children/compareBar.vue'
import CompareDown from './children/compareDown.vue'
export default {
  props: ['paramsObject'], /* selectedRows: 表格选中数据 */
  data () {
    return {
      downTypeList: ['timeLx', 'date'],
      mode2: ['month', 'month'],
      dateFormat: 'YYYY-MM-DD',
      timeList: [], /* 时间选择 */
      searchParam: { /* 页面搜索项 */
        timeLx: '',
        timeLxName: '',
        start: '',
        end: '',
        code: [],
        category: [],
        Eparam: ''
      },
      ajaxParam: {}, /* 柱状图数据入参 */
      selectedRows: [], /* selectedRows: 表格选中数据 */
      scrollTop: 0
    }
  },
  created () {
    const menu2Search = window.sessionStorage.getItem('menu2Search')
    if (menu2Search) {
      const menu2SearchObj = JSON.parse(menu2Search)
      // console.log(menu2SearchObj, '---------------->AQI缓存')
      this.timeList = Com.timeList
      this.searchParam.timeLx = menu2SearchObj.timeLx
      this.searchParam.timeLxName = menu2SearchObj.timeLxName
      this.searchParam.start = menu2SearchObj.start
      this.searchParam.end = menu2SearchObj.end
      this.searchParam.Eparam = menu2SearchObj.Eparam
    } else {
      this.timeList = Com.timeList
      this.searchParam.timeLx = Com.timeDefault
      this.searchParam.timeLxName = Com.timeDefaultName
      var start = Com.getBeforeDate(7, 'date')
      var end = Com.getBeforeDate(0, 'date')
      this.searchParam.start = start
      this.searchParam.end = end
    }
  },
  mounted () {
    if (this.paramsObject.selectedRows) { // props参数
      this.selectedRows = this.paramsObject.selectedRows
      this.searchBtnClick() // 查询事件
    }
    document.getElementById('bodyWrapperId').addEventListener('scroll', () => {
      const top = document.getElementById('bodyWrapperId').scrollTop
      this.scrollTop = top
    })
    // if (this.$store.state.moduleSD.SelectedTable) { // store参数
    //   this.selectedRows = this.$store.state.moduleSD.SelectedTable.selectedRows
    //   this.searchBtnClick() // 查询事件
    // }
  },
  methods: {
    moment,
    disabledDate (current) {
      return current && current > moment().endOf('day') // 不能今天之后的日期
    },
    onChangeDate: function (date, dateString) { // 日均值日期选择
      this.searchParam.start = dateString[0]
      this.searchParam.end = dateString[1]
    },
    downClickPar: function (val, type, code, gkz) { // 下拉选择
      if (val === '时均值') {
        this.searchParam.timeLxName = val
        this.searchParam[type] = 'H'
      } else if (val === '日均值') {
        this.searchParam.timeLxName = val
        this.searchParam[type] = 'D'
      } else {
        this.searchParam[type] = val
      }
    },
    searchBtnClick: function () { // 查询事件
      if (this.searchParam.timeLx === 'D') {
        const num = Com.dateDiff(this.searchParam.start, this.searchParam.end)
        if (num < 2) {
          this.$message.warning('时间类型为天时,请间隔2天以上')
        } else {
          this.searchUrlClick()
        }
      } else {
        this.searchUrlClick()
      }
    },
    searchUrlClick: function () {
      this.ajaxParam = {
        timeLx: this.searchParam.timeLx,
        timeLxName: this.searchParam.timeLxName,
        start: this.searchParam.start,
        end: this.searchParam.end,
        code: this.searchParam.code,
        category: this.searchParam.category
      }

      // 修改时间格式
      const idx = this.ajaxParam.start.indexOf(' ')
      if (idx !== -1) { // 年月日时分秒
        if (this.ajaxParam.timeLx === 'D') {
          this.ajaxParam.start = (this.ajaxParam.start).substring(0, idx)
          this.ajaxParam.end = (this.ajaxParam.end).substring(0, idx)
        }
      } else { // 年月日
        if (this.ajaxParam.timeLx === 'H') {
          const time = Com.stringTime((new Date()), 'time')
          this.ajaxParam.start = (this.ajaxParam.start) + time
          this.ajaxParam.end = (this.ajaxParam.end) + time
        }
      }

      // 过滤数据
      if (this.selectedRows.length > 0) {
        const code = []
        const category = []
        this.selectedRows.forEach((item, i) => {
          code.push(item.code)
          category.push(item.name)
        })
        this.ajaxParam.code = code.join(',')
        this.ajaxParam.category = code
      }
      this.ajaxParam.Eparam = this.$store.state.moduleSD.Eparam
      window.sessionStorage.setItem('menu2Search', JSON.stringify(this.ajaxParam))
      // console.log(JSON.stringify(this.ajaxParam), '----------menu2Search查询')
      this.$refs.CompareBar.initChart(this.ajaxParam, this.scrollTop)
    }
  },
  watch: {
    paramsObject: { // props参数
      handler: function (value) {
        const result = JSON.parse(JSON.stringify(value))
        this.selectedRows = result.selectedRows
        this.searchBtnClick() // 查询
      },
      deep: true
    }
    // '$store.state.moduleSD.SelectedTable': { // store参数
    //   handler: function () {
    //     this.selectedRows = this.$store.state.moduleSD.SelectedTable.selectedRows
    //     this.searchBtnClick() // 查询事件
    //   },
    //   deep: true
    // }
  },
  components: {
    CompareBar,
    CompareDown
  }
}
</script>

<style lang="less" scoped>
.timeGroup > span {
  font-size: 0.14rem;
  color: rgba(0, 0, 0, 0.65);
  padding: 0 0.1rem;
}
</style>
